<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格2</title>
	</head>
	<style>
		html,body{
			height: 100%;
			font-family: 'PingFang SC','Microsoft YaHei','Helvetica Neue','Helvetica','Arial',sans-serif;
		}
		.table_div{
			
		}
		.box{
			width: 300px;
		}
		.heard{
			width: 100%;
			height: 60px;
			background-color: #169fe6;
			align-items: center;
			display: flex;
		}
		.heard a{
			display: block;
			font-size: 24px;
			color: #fff;
			margin-left: 10px;
		}
		.box .content{
			margin-top: 0;
			width: 100%;
			border: 1px solid #e9e9e9;
		}
		.content_text{
			border-bottom: 1px solid #e9e9e9;
			padding: 11px;
			font-size: 18px;
		}
		.content_text a{
			display: block;
			color: #777;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow: ellipsis; 
		}
		.content_text .date{
			display: block;
			font-size: 13px;
			padding-left: 70%;
			margin-top: 7px;
		}
		
		.a{
			display: block;
			width: 100px;
			height: 100px;
			background-color: aqua;
		}
		
		.b{
			display: block;
			width: 100px;
			height: 100px;
			background-color: aquamarine;
		}
		
		.a:hover + .b{
			background-color: red;
		}
		
		.a:focus + .b{
			background-color: yellow;
		}
		
	</style>
	<body>
		<div class="table_div">
			<div class="box">
				<div class="heard">
					<a>这是标题</a>
				</div>
				<div class="content">
					<div class="content_text">
						<a>条目11111111111111111111111111111111111111111111111111111111111</a>
						<a class="date">2023-08-30</a>
					</div>
					<div class="content_text">
						<a>条目22222</a>
						<a class="date">2023-08-30</a>
					</div>
				</div>
			</div>
		</div>
		
		<a class="a">
			这是a
		</a>
		
		<a class="b">
			这是b
		</a>
	</body>
</html>